<template>
    <vp-table v-loading="tableLoading" :data="tableData" stripe border class="w100" row-key="id" id="process-history-div">
        <el-table-column  type="index" align="center" label="#">
        </el-table-column>
        <el-table-column :label="$t('item.startTime')" prop="startTime" width="180">
            <template #header><vp-label zh="开始时间" en="Start Time"/></template>
        </el-table-column>
        <el-table-column :label="$t('item.endTime')" prop="endTime" width="180">
            <template #header><vp-label zh="结束时间" en="End Time"/></template>
            <template #default="scope">
                {{scope.row.endTime?scope.row.endTime:'待处理'}}
            </template>
        </el-table-column>
        <el-table-column :label="$t('workflow.task.processingTime')" prop="processingTime" width="140">
            <template #header><vp-label zh="处理时长" en="Processing Time"/></template>
            <template #default="scope">
                {{formatProcessingTime(scope.row)}}
            </template>
        </el-table-column>
        <el-table-column :label="$t('workflow.task.name')" prop="taskName" width="200" show-overflow-tooltip>
            <template #header><vp-label zh="节点名称" en="Node Name"/></template>
        </el-table-column>
        <el-table-column :label="$t('item.handler')" prop="userName" width="150" show-overflow-tooltip>
            <template #header><vp-label zh="处理人" en="Handler"/></template>
        </el-table-column>
        <el-table-column :label="$t('item.operation')" prop="operate" width="150" show-overflow-tooltip>
            <template #header><vp-label zh="操作" en="Operation"/></template>
            <template #default="scope">
                {{ scope.row.operate == 'completed' ? '同意/Completed' : scope.row.operate == 'auto_completed' ? '系统自动完成/Auto Completed' :
                scope.row.operate == 'delegation_completed' ? '完成委托/沟通/Delegation Completed' : scope.row.operate == 'reject' ? '驳回/Reject' : 
                scope.row.operate == 'cancel' ? '中止/Cancel' : scope.row.operate == 'transfer' ? '转办/Transfer' : 
                scope.row.operate == 'admin_transfer' ? '管理员指定办理人员/Administrator designates processing personnel' : 
                scope.row.operate == 'delegate' ? '委派/沟通/Delegate' :
                scope.row.operate == 'back' ? '取回/Retrieval' : '' }}
            </template>
        </el-table-column>
        <el-table-column :label="$t('item.comments')" prop="comments" min-width="300">
            <template #header><vp-label zh="说明" en="Comments"/></template>
            <template #default="{row}">
                <p v-html="row.comments" style="white-space:pre-wrap"></p>
                <VpRowAttachment v-if="row.attachmentList" :attachmentList="row.attachmentList" :read-only="true"></VpRowAttachment>
            </template>
        </el-table-column>
    </vp-table>
</template>
<script lang="ts" setup name="processHistory">
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import request from '/@/utils/request'
import VpRowAttachment from '../file/VpRowAttachment.vue';

    const props= defineProps<{ processInsId: string }>();
    const tableData = ref([]);
    const tableLoading = ref(false);

    onMounted(() => {
            tableLoading.value = true;
            request.get(`/workflow/process/history/${props.processInsId}`).then(res => {
                tableData.value = res?.data || [];
            }).finally(() => {
                tableLoading.value = false;
            });
        });
        const formatProcessingTime = (row: any) => {
            if (!row.processingTime) {
                row.processingTime = (row.endTime ? new Date(row.endTime).getTime(): Date.now()) - new Date(row.startTime).getTime();
            }
            let days = Math.floor(row.processingTime / (1000 * 60 * 60 * 24));
            let hours = Math.floor(row.processingTime % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
            let mins = Math.floor(row.processingTime % (1000 * 60 * 60 * 24) % (1000 * 60 * 60) / (1000 * 60));
            return (days > 0 ?(days + '天'):"") + (( hours >0)?(hours + '时'):"") + mins + '分';
        };

</script>
